<template>
  <div class="details">
    <div>
      <div
        style="background-color: rgb(46, 47, 59); color: rgb(255, 255, 255);"
      >
        <div class="uO9whxUfHiWRiV6G5GBiA tm2-Xe5MgkhKl7jd09lo-">
          <i class="Ew1X4LyRc6w1Ybtp768N">
            <img
              src=""
              alt="阿三发射点犯得上发给施工"
              @click="back"

            />
          </i>
        </div>
      </div>
    </div>
    <div class="_3h8xKVp9r7mCfuV8O28WAf">
      <div class="_1ck8NPszwLtbvdi1zgtnsi">
        <div class="_2Kc8upDqBO243gm67avsrp">
          <img :src="shopInfo.shopPic" alt="" />
        </div>
        <div class="JsG8MW9_90BkVXgOSrxvc">
          <div class="_3mL1A3TZ3PIprRg5h3rq-H">
            <div class="_3tJpS-1wYBHZ_b5Uth9D7v">
              <span class="_2dwTOCpbwvPWTYSRsslP4r mtsi-num">35分钟</span>|<span
                class="mtsi-num"
                >3.5km</span
              ><i class="_2yRf2EFs7dUwN9kNDYTrYg _3dNdV8OZMSSTfD1Ikr82Lg"></i>
            </div>
            <div class="_1N_pfyj54lzMMJfu5ouZSg">
              公告：{{ shopInfo.deliveryMsg }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav">
      <div
        :style="{ fontWeight: selectIndex === index ? '700' : '' }"
        v-for="(item, index) in nav"
        :key="index"
        @click="onClick(index)"
      >
        {{ item }}
      </div>
    </div>

    <div class="goods-list">
      <div class="left-nav-scroll">
        <CategoryLeftNav />
      </div>
      <div class="right-list-scroll">
        <CategoryRightList />
      </div>
    </div>
    <div class="submit">
      <div>
        <van-icon
          @click="Show"
          size="30px"
          name="shopping-cart-o"
          :badge="CartData.length"
        />
      </div>
      <div>￥{{ totalPrice }}</div>
      <div @click="onSubmit">结算</div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <div class="cart-scroll">
        <div
          class="item-deteils"
          v-for="(item, index) in CartData"
          :key="index"
        >
          <div class="title">{{ item.spuName }}</div>
          <div class="price-num">
            <div class="price">
              {{ (item.originPrice * item.count) | price }}
            </div>
            <div class="num">
              <div
                :style="{
                  visibility:
                    item.count == 0 || typeof item.count != 'number'
                      ? 'hidden'
                      : 'visible',
                }"
                @click="Minus(item)"
              >
                -
              </div>
              <div
                :style="{
                  visibility:
                    item.count == 0 || typeof item.count != 'number'
                      ? 'hidden'
                      : 'visible',
                }"
              >
                {{ item.count }}
              </div>
              <div @click="AddCart(item)">+</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import CategoryLeftNav from "../components/CategoryLeftNav";
import CategoryRightList from "../components/CategoryRightList";
export default {
  components: {
    CategoryLeftNav,
    CategoryRightList,
  },
  props: {},
  data() {
    return {
      nav: ["点菜", "评价", "商家"],
      selectIndex: 0,
      show: false,
    };
  },
  //事件处理器
  methods: {
    onClick(index) {
      this.selectIndex = index;
    },
    onSubmit() {
      this.$store.dispatch("Submit");
    },
    back() {
      window.history.back();
    },
    Show() {
      this.show = !this.show;
    },
    AddCart(item) {
      this.$store.dispatch("AddCart", item);
      //   console.log(this.item);
    },
    Minus(item) {
      this.$store.dispatch("Minus", item);
    },
  },
  // 计算属性
  computed: {
    shopInfo() {
      return this.$store.state.DetailsData.shopInfo;
    },
    CartData() {
      return this.$store.state.CartData;
    },
    totalPrice() {
      return this.$store.state.totalPrice;
    },
  },
  filters: {
    price(value) {
      return "￥" + value;
    },
  },
  //侦听器
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$store.dispatch("DetailsId", this.$route.query.id);
    // console.log(this.$route.query.id);
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.submit {
  width: 100%;
  height: 3.125rem;
  background: #000;
  position: fixed;
  bottom: 0;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
}
.details {
  width: 100%;
}
.uO9whxUfHiWRiV6G5GBiA {
  padding: 0.9375rem;
}
.uO9whxUfHiWRiV6G5GBiA .Ew1X4LyRc6w1Ybtp768N img {
  width: 2%;
  background-position: center;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
._2Kc8upDqBO243gm67avsrp {
  width: 25%;
}
._2Kc8upDqBO243gm67avsrp img {
  width: 100%;
  border-radius: 0.2rem;
}
.JsG8MW9_90BkVXgOSrxvc {
  padding-left: 0.625rem;
  font-size: 0.75rem;
}
._3h8xKVp9r7mCfuV8O28WAf {
  padding-bottom: 20px;
}
._1ck8NPszwLtbvdi1zgtnsi {
  width: 100%;
  height: 80px;
  background-color: #2e2f3b;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  padding-left: 0.625rem;
}
.nav {
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
}
.goods-list {
  width: 100%;
  display: flex;
  height: 27rem;
}
.left-nav-scroll {
  width: 20%;
  height: 100%;
  overflow-y: scroll;
}
.right-list-scroll {
  width: 80%;
  height: 100%;
  overflow-y: scroll;
}
.cart-scroll {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 3.2rem;
}
.item-deteils {
  width: 90%;
  padding: 0 5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 3.125rem;
  border-bottom: 1px solid #ccc;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica,
    "\5B8B\4F53", sans-serif;
  line-height: 22.5px;
  margin-bottom: 2px;
}
.name {
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 15px;
  font-size: 11px;
  color: #666666;
  word-break: break-all;
}
.price-num {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  height: 21.5px;
  line-height: 21.5px;
  display: inline-block;
  color: #fb4e44;
  font-size: 18px;
  font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica,
    "\5B8B\4F53", sans-serif;
  vertical-align: middle;
}
.num {
  width: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.num div:nth-child(1) {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
/* .num div:nth-child(2) {
  visibility: hidden;
} */
.num div:nth-child(3) {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #ffcc52;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ffcc52;
}
</style>
